<template>
    <div class="user-menu">
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="user-trigger">
          <el-avatar :size="32" :src="userStore.userInfo?.avatar">{{ userStore.userInfo?.nickname?.charAt(0) }}</el-avatar>
          <span class="nickname">{{ userStore.userInfo?.nickname }}</span>
          <i class="i-ep-arrow-down" />
        </div>
  
        <template #dropdown>
          <el-dropdown-menu>
            <div class="user-info">
              <el-avatar :size="40" :src="userStore.userInfo?.avatar">{{ userStore.userInfo?.nickname?.charAt(0) }}</el-avatar>
              <div class="info-text">
                <div class="name">{{ userStore.userInfo?.nickname }}</div>
                <div class="email">{{ userStore.userInfo?.email }}</div>
              </div>
            </div>
            <el-divider />
            <el-dropdown-item command="workspace">
              <i class="i-ep-user" />工作区
            </el-dropdown-item>
            <el-dropdown-item command="account">
              <i class="i-ep-setting" />账号设置
            </el-dropdown-item>
            <el-dropdown-item command="settings">
              <i class="i-ep-tools" />设置
            </el-dropdown-item>
            <el-dropdown-item command="feedback">
              <i class="i-ep-message" />反馈
            </el-dropdown-item>
            <el-dropdown-item command="community">
              <i class="i-ep-user-filled" />社区
            </el-dropdown-item>
            <el-dropdown-item command="help">
              <i class="i-ep-question-filled" />帮助
            </el-dropdown-item>
            <el-dropdown-item command="roadmap">
              <i class="i-ep-map-location" />路线图
            </el-dropdown-item>
            <el-dropdown-item command="about">
              <i class="i-ep-info-filled" />关于
            </el-dropdown-item>
            <el-divider />
            <el-dropdown-item command="logout">
              <i class="i-ep-switch-button" />退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { useUserStore } from '@/store/user'
  import { ElMessageBox } from 'element-plus'
  
  const router = useRouter()
  const userStore = useUserStore()
  
  const handleCommand = (command: string) => {
    switch (command) {
      case 'workspace':
        router.push('/workspace')
        break
      case 'account':
        router.push('/account')
        break
      case 'settings':
        router.push('/settings')
        break
      case 'feedback':
        router.push('/feedback')
        break
      case 'community':
        router.push('/community')
        break
      case 'help':
        router.push('/help')
        break
      case 'roadmap':
        router.push('/roadmap')
        break
      case 'about':
        router.push('/about')
        break
      case 'logout':
        handleLogout()
        break
    }
  }
  
  const handleLogout = () => {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      userStore.singout()
      router.push('/signin')
    })
  }
  </script>
  
  <style scoped lang="scss">
  .user-menu {
    position: relative;
    
    .user-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      
      &:hover {
        background-color: #f5f5f5;
      }
      
      .nickname {
        font-size: 14px;
        color: #333;
      }
    }
    
    .menu-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      width: 240px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      padding: 8px 0;
      z-index: 1000;
      
      .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        
        .info-text {
          .name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
          }
          
          .email {
            font-size: 12px;
            color: #666;
          }
        }
      }
      
      .el-dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        font-size: 14px;
        
        i {
          font-size: 16px;
        }
      }
    }
  }
  </style>